<ui:composition 
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:q="http://huliqing.name/qfaces"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:c="http://java.sun.com/jsp/jstl/core"
                template="/WEB-INF/template/layout_system.xhtml">

    <ui:define name="subTabName">
        <c:set var="subTabName" value="account" />
    </ui:define>

    <ui:define name="menuTitle">
        <img src="/_res/image/star.png" height="40" class="alignM" alt=""/>
        帐号管理
    </ui:define>

    <ui:define name="menuContent">

        <h:outputText value="注意：“admin” 帐号当前正处于激活状态中，为安全起见，强烈建议
                      您关闭“admin”帐号，方法：创建其它帐号，并用其它帐号登录，
                      然后停用“admin”帐号." 
                      styleClass="red"
                      rendered="#{accountWe.adminActived and !app.demo}"/>

        <h:form>
            <q:scroller for="accounts" listener="#{accountWe.loadData}"
                        var="account" face="1"
                        displayJump="false">
            <h:dataTable id="accounts"
                binding="#{accountWe.uiAccounts}"
                headerClass="header"
                width="100%"
                styleClass="alignC dotted"
                rowClasses="row1,row2"
                columnClasses="oper,"
                cellpadding="3">
                <h:column>
                    <f:facet name="header">
                        <h:outputText value="操作" />
                        <h:commandLink action="fix bug：多余的空格存在于首行edit与delete之间。" />
                    </f:facet>
                    <h:outputLink value="/admin/system/password.faces" styleClass="marginLR" title="Edit password">
                        <f:param name="account" value="#{account.account}" />
                        <h:graphicImage url="/_res/image/button-edit.gif" />
                    </h:outputLink>
                    <h:commandLink
                        action="#{accountWe.deleteAccount}"
                        onclick="return confirm('#{text['p.toDelete']}');"
                        styleClass="marginLR"
                        rendered="#{account.account != 'admin'}">
                        <h:graphicImage url="/_res/image/button-delete.gif" />
                    </h:commandLink>
                </h:column>
                <h:column>
                    <f:facet name="header">
                        <h:outputText value="帐号" />
                    </f:facet>
                    <h:outputText value="#{account.account}" styleClass="#{account.active ? '' : 'gray'}" />
                    <h:outputText value="(已停用)" rendered="#{!account.active}" styleClass="#{account.active ? '' : 'gray'}" />
                </h:column>
                <h:column>
                    <f:facet name="header">
                        <h:outputText value="昵称" />
                    </f:facet>
                    <h:inputText value="#{account.nickname}" />
                </h:column>
                <h:column>
                    <f:facet name="header">
                        <h:outputText value="激活的" />
                    </f:facet>
                    <h:selectBooleanCheckbox value="#{account.active}" />
                </h:column>
                <h:column>
                    <f:facet name="header">
                        <h:outputText value="创建日期" />
                    </f:facet>
                    <h:outputText value="#{account.createDate}" >
                        <f:convertDateTime pattern="#{app.dateTimeFormat}" timeZone="#{app.timeZone}" />
                    </h:outputText>
                </h:column>
                <f:facet name="footer">
                    <h:panelGroup>
                        <h:commandButton value="批量更新" action="#{accountWe.updateAll}" styleClass="floatL"/>
                    </h:panelGroup>
                </f:facet>
            </h:dataTable>
            </q:scroller>
        </h:form>

        <div style="margin-top:20px;"></div>
        <h:form>
            <h:panelGrid columns="3"
                         headerClass="header"
                         border="0"
                         rowClasses="row1,row2"
                         cellpadding="3"
                         cellspacing="3">
                <f:facet name="header">
                    <h:outputText value="创建新帐号" />
                </f:facet>

                <h:outputText value="昵称：" />
                <h:inputText id="_nickname" value="#{accountWe.newAccount.nickname}" />
                <q:validator for="_nickname" required="true" 
                             message="必填,“昵称”公开的，该昵称可能公开于网站的任何可能由访客见到的地方。
                             如文章作者，用户资料等。为安全起见，尽量不要与“帐号”相同"/>

                <h:outputText value="帐号：" />
                <h:inputText id="_account" value="#{accountWe.newAccount.account}" />
                <q:validator for="_account" required="true" 
                             message="必填,用于登录系统的帐号，区分大小写，帐号不会显示于网站的任何其它访客可见的位置。
                             为安全起见，建议尽量不要与“昵称”相同,支持任何字符。" />
 
                <h:outputText value="密码：" />
                <h:inputSecret id="_password1" value="#{accountWe.newAccount.password}" />
                <q:validator for="_password1" required="true" message="必填，与帐号匹配，用于登录网站"/>

                <h:outputText value="确认密码" />
                <h:inputSecret id="_password2" />
                <q:validator for="_password2" required="true" equalId="_password1" message="必填,再次确认密码" />

                <h:commandButton value="创建新帐号" action="#{accountWe.createAccount}" styleClass=""/>
                <h:panelGroup />
                <h:panelGroup />
            </h:panelGrid>
        </h:form>

    </ui:define>
</ui:composition>